import React, { Component } from 'react';
import { NavLink} from 'react-router-dom';
import {createStore} from 'redux';
import {Provider,connect} from 'react-redux';
import {userLogin,changeUseName,loginState} from '../action/login'; //这里是引入login里的方法
import mapStateToProps from '../value/mapStateToProps'//连接仓库


 class Header extends Component {
    constructor (props) {   
        super(props)  
      }

//退出登录
logout=(e)=>{  
    if(confirm('是否确认离开？')){
    this.props.loginState({});                      
   }else{
     
   }}
  render() {
    var style = {
        NavRight:{marginRight:"15px"},
        NavWidth:{ 
                    width:"100%",
                    background:"#101010",
                    height:"51px",
                    marginBottom:'20px'
                },
        userName:{
            color:"#fff"
        },
        Welcome:{display:"none"}
        
         }
         if( this.props.user.loginState){
            var Islogin =(
            <ul className="nav navbar-nav navbar-right" style={style.NavRight}>                                    
                <li><a style={style.userName}>欢迎您，{this.props.user.name}</a></li>
                <li><NavLink to='/user'>个人中心</NavLink></li>
                <li><NavLink to='/' activeClassName="active" onClick={this.logout}>退出</NavLink></li>
            </ul>
            )
            }else{
            var Islogin=( 
            <ul className="nav navbar-nav navbar-right" style={style.NavRight}>                                    
                <li><NavLink to='/login' activeClassName="active">登录</NavLink></li>
                <li><NavLink to='/register' activeClassName="active">注册</NavLink></li>
            </ul>
         )
            }

    return (
        
      <div className="navbar-wrapper" style={style.NavWidth}>
        <div className="container">

        <nav className="navbar navbar-inverse navbar-static-top">
            <div className="container">
                <div className="navbar-header">
                    <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span className="sr-only">Toggle navigation</span>
                    <span className="icon-bar"></span>
                    <span className="icon-bar"></span>
                    <span className="icon-bar"></span>
                    </button>
                    <a className="navbar-brand" href="#">Extraordinary</a>
                </div>
                <div id="navbar" className="navbar-collapse collapse">
                    <ul className="nav navbar-nav ">
                        <li className="active"><NavLink to='/' activeClassName="active">首页</NavLink></li>
                        <li><NavLink to='/news' activeClassName="active">新闻</NavLink></li>
                        <li><NavLink to='/product' activeClassName="active">产品</NavLink></li>
                        <li><NavLink to='/cart' activeClassName="active">购物车</NavLink></li>
                    </ul>
                    {Islogin}
                </div>
            </div>
        </nav>

        </div>
    </div>
    )
  }
}
export default connect(mapStateToProps,{userLogin,changeUseName,loginState})(Header);